<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <link rel="stylesheet" href="../../static/easyui/bootstrap/css/bootstrap.min.css"/>
    <script type="text/javascript" src="../../static/easyui/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="../../static/easyui/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../../static/easyui/css/common/box.css"/>
    <link rel="stylesheet" type="text/css" href="../../static/easyui/css/common/checkbox.css"/>
    <link rel="stylesheet" href="../../static/easyui/css/role/roleset.css"/>
    <title>权限设定</title>
</head>
<body>
<div class="">
    <div class=" ">
        <div class="row">
            <div class="col-md-2">
                <h1 style="font-size: 24px; margin-top: 10px;" class="">${param.roleName}</h1>
            </div>
            <div class="col-md-10 text-right">
                <a href="##"><span class="glyphicon glyphicon-home"></span> 首页</a>
                > <a disabled="disabled">${param.roleName}</a>
            </div>
        </div>
        <div class="row" style="padding-top: 15px;">
            <div class="col-md-12">
                <div class="bgc-w box box-primary">
                    <!--盒子头-->
                    <div class="box-header">
                        <a class="btn btn-sm label-back"
                           href="javascript:history.back();"> <span
                                class="glyphicon glyphicon-chevron-left"></span> 返回
                        </a>
                    </div>
                    <!--盒子身体-->
                    <div class="box-body no-padding">
                        <div>
                            <table class="table table-hover" id="roleTable">
                                <thead>
                                <tr>
                                    <th scope="col">ID</th>
                                    <th scope="col">名称</th>
                                    <%--<th scope="col" class="widths">路径</th>--%>
                                    <%--<th scope="col">类型</th>--%>
                                    <th scope="col">开启权限</th>
                                </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    $(document).ready(function () {
        //

        $(document).on("click", ".parent", function () {
            var $selectAll = $(this);
            var showStatus="";
            var menuId= $(this).parents("td").prev().prev().text();
            var menuId1=[];
            menuId1.push(menuId);
            if ($selectAll.prop("checked")==true){
                $(":checkbox[data-parentid="+menuId+"]").prop("checked",true);
                showStatus="1";
            }else {
                $(":checkbox[data-parentid="+menuId+"]").prop("checked",false);
                showStatus="0";
            }
            var menuId2=$(":checkbox[data-parentid="+menuId+"]").parents("td").prev().prev();
            console.log(menuId2.length);
            for (var i=0;i<menuId2.length;i++){
                menuId1.push($(menuId2[i]).text())
            }
            
            // console.log(menuId);
            // var a= $(this).parents("tr").nextAll().find(".sub").data("parentid");
            $.ajax({
                async: true,
                type: "POST",
                url: "${pageContext.request.contextPath}/Menu/updateMenu?roleId="+"${param.roleId}"+"&showStatus="+showStatus,
                contentType:"application/json",
                data: JSON.stringify(menuId1),
                dataType: "json",
                success:function (result) {

                },
                error: function () {
                    alert("异步请求失败!");
                }
            })
        });
        $(document).on("click",".sub",function () {
            var a= $(this).data("parentid");
            var flag=true;
            var menuId1=[];
            var menuId=$(this).parents("td").prev().prev().text();
            var showStatus="";
            var $sub =$(":checkbox[data-parentid="+a+"]");
            var $checked =$(":checkbox[data-parentid="+a+"]:checked");
            console.log($checked.length);
            if ($checked.length==0){
                flag=false;
            }else if ($checked.length>0){
                flag=true;
            }
            var parent = $(":checkbox[data-id="+a+"]").parents("td").prev().prev().text();
            if (flag==true){
                $(":checkbox[data-id="+a+"]").prop("checked",true);
                menuId1.push(parent)

            }else if (flag==false){
                $(":checkbox[data-id="+a+"]").prop("checked",false);
            }
            if ($(this).prop("checked")==true){
                showStatus="1";
            } else if ($(this).prop("checked")==false) {
                showStatus="0";
                // menuId1.push(parent);
                menuId1.pop(parent);
            }
            menuId1.push(menuId);
            $.ajax({
                async: true,
                type: "POST",
                url: "${pageContext.request.contextPath}/Menu/updateMenu?roleId="+"${param.roleId}"+"&showStatus="+showStatus,
                contentType:"application/json",
                data: JSON.stringify(menuId1),
                dataType: "json",
                success:function (result) {

                },
                error: function () {
                    alert("异步请求失败!");
                }
            })
        })

        $.ajax({
            async: true,
            type: "GET",
            url: "${pageContext.request.contextPath}/Menu/allMenu",
            data:{
                roleId:"${param.roleId}"
            },
            dataType: "json",
            success: function (result) {
                var content = "";
                    $.each(result, function (index, rootMenu) {
                        content += "<tr style=\"background-color:rgba(255, 235, 59, 0.19);\" >\n" +
                            "                                    <td class=\"menuid\">" + rootMenu.menuId + "</td>\n" +
                            "                                    <td><span>" + rootMenu.menuName + "</span></td>\n" +
                            "                                    <td>\n" +
                            "                                      <span class=\"labels\">\n";
                        if (rootMenu.showStatus == 1) {
                            content += "                                       <input type=\"checkbox\" name=\"show\" data-id=\""+ rootMenu.menuId+"\" class=\"parent\" checked></span>\n" +
                                "                                    </td>\n" +
                                "                                </tr>";
                        } else {
                            content += "                                       <input type=\"checkbox\" name=\"show\" data-id=\""+ rootMenu.menuId+"\"class=\"parent\"></span>\n" +
                                "                                    </td>\n" +
                                "                                </tr>";
                        }


                        $.each(rootMenu.subMenus, function (index1, subMenus) {

                            content += "<tr>\n" +
                                "                                    <td class=\"menuid\">" + subMenus.menuId + "</td>\n" +
                                "                                    <td><span>" + subMenus.menuName + "</span></td>\n" +
                                "                                    <td>\n" +
                                "                                      <span class=\"labels\">\n";
                            if (subMenus.showStatus == 1) {
                                content += "                                       <input type=\"checkbox\" name=\"show\" data-parentid=\""+ rootMenu.menuId+"\"  class=\"sub\" checked></span>\n" +
                                    "                                    </td>\n" +
                                    "                                </tr>"
                            } else {
                                content += "                                       <input type=\"checkbox\" name=\"show\" data-parentid=\""+ rootMenu.menuId+"\" class=\"sub\"></span>\n" +
                                    "                                    </td>\n" +
                                    "                                </tr>"
                            }
                        })


                    })
                $("#roleTable tbody").html(content);
            },

            error: function () {
                alert("异步请求失败!");
            }
        });
    })
</script>
</html>
